<template>
  <div class="registerDivMain">
    <div class="register">
      <span>用户注册</span>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" />
        </el-form-item>
        <el-form-item label="职位" prop="role">
          <!-- <el-input v-model="ruleForm.role" /> -->
          <el-select v-model="ruleForm.role" placeholder="请选择">
            <el-option label="管理员" value="管理员" />
            <el-option label="营业员" value="营业员" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="register">注册</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import myAxios from '../../axios/myAxios'
interface RuleForm {
  username: string
  password: string
  phone: string
  email: string
  role: string
}

const ruleFormRef = ref()
const ruleForm = reactive<RuleForm>({
  username: '',
  password: '',
  phone: '',
  email: '',
  role: '',
})

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入电话号码', trigger: 'blur' },
    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
  role: [
    { required: true, message: '请选择职位', trigger: 'blur' },
    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
  ],
})

const router = useRouter()
const register = () => {
  myAxios
    .post('/user/register', {
      username: ruleForm.username,
      password: ruleForm.password,
      phone: ruleForm.phone,
      email: ruleForm.email,
      role: ruleForm.role,
      status: '正常',
    })
    .then((res) => {
      if (res.data.code == 200) {
        router.push('/login')
      }
    })
}
</script>

<style scoped>
.registerDivMain {
  height: 100%;
  width: 100%;
  background-image: url(../../assets/登录背景图.jpg);
  background-size: cover;
}

.register {
  width: 40%;
  height: 65%;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #fff;
  border-radius: 10%;
}
span {
  font-size: 20px;
}
</style>
